<script>
import { ElMessage } from 'element-plus'
import md5 from 'md5'
// import axios from 'axios'
import { loginFn } from '@/api/user'

// npm install vuex@next --save

export default {
    data() {
        return {
            adminname: '',
            password: ''    
        }
    },
    methods: {
        loginClick() {
            console.log(this.adminname, this.password);
            /*
                做表单的数据验证
                对密码加密
                服务器数据提交
            */

            // if (this.adminname.length < 6) {
            //     ElMessage.error('管理员账号长度要大于等于 6 位.')
            //     return
            // }

            // if (!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(this.adminname)) {
            //     ElMessage.error('请输入正确手机号.')
            //     return
            // }

            // if (!/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(this.password)) {
            //     ElMessage.error('请输入包含大写字母，小写字母，数字和一个特殊符号所组成的 6 位密码.')
            //     return
            // }


            // console.log(md5('千锋123456教育@#￥'));

            // axios.post('http://121.89.205.189:3000/admin/admin/login', {
            //     adminname: this.adminname,
            //     password: this.password
            // }).then(res => {
            //     console.log(res.data);
            // }).catch(err => {
            //     console.log(err);
            // }).finally(data => {
            //     console.log(data);
            // })

                

            loginFn({
                adminname: this.adminname,
                password: this.password
            }).then(res => {
                // console.log(1111111,res);
                if (res.code == 200) {
                    console.log('登录成功', res);
                    ElMessage.success('登录成功')
                    // 将用户的登录信息保存在全局状态中
                    this.$store.commit('changeUserInfo', res.data)
                    this.$router.push('/')
                    // 1. 跳转页面
                    // 2. 保存用户登录信息
                }
            })
            
        },
        addClick() {
            // 调用修改函数
            // this.$store.commit('add')
            // 调用可以传参的修改函数
            // this.$store.commit('addNum', 5)

            // 调用异步修改函数
            this.$store.dispatch('addNumAction', 8)
        }
    },
    mounted() {
        console.log(this.$store.state.count);
    },
}
</script>
<template>
    <div class="login-container">
        <div class="form-wrap">
            <h3>
                登录页面 -- {{ $store.state.count }}
                <button @click="addClick">+</button>
             </h3>
            <el-input v-model="adminname" placeholder="请输入账号" />
            <el-input @keyup.enter="loginClick" v-model="password" class="psw" placeholder="请输入密码" />
            <el-button @click="loginClick" type="success">登录</el-button>
        </div>
    </div>
</template>
<style scoped lang="scss">
    .login-container {
        height: 100%;
        background-color: rgb(233, 247, 247);
        /* background-image: ; */
        .form-wrap {
            width: 360px;
            background-color: white;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            padding: 20px 30px 30px 30px;
            border-radius: 10px;

            h3 {
                text-align: center;
            }
            .psw {
                margin-top: 20px;
            }

            .el-button {
                margin-top: 20px;
                width: 100%;
            }
        }

    }
</style>
import md5 from 'md5';
, formContextKey, loginFnloginFn, ElMessage, 
